import React from 'react';
import { useFormData } from '../../utils/hooks/useFormData';

export const UseFormDataDemo = () => {
  const [formData, setFormItem, resetForm] = useFormData({
    title: '',
    option: '',
    select: '',
  });
  const { title, option, select } = formData;
  return (
    <div>
      <div>
        <label htmlFor="title">标题</label>
        <input
          type="text"
          id="title"
          value={title}
          onChange={e => setFormItem('title', e.target.value)}
        />
      </div>
      <div>
        <label htmlFor="option">多选</label>
        <input
          type="text"
          id="option"
          value={option}
          onChange={e => setFormItem('option', e.target.value)}
        />
      </div>
      <div>
        <label htmlFor="select">下拉</label>
        <input
          type="text"
          id="select"
          value={select}
          onChange={e => setFormItem('select', e.target.value)}
        />
      </div>
      <button type="button" onClick={e => console.log(formData)}>
        登录
      </button>
      <button type="button" onClick={resetForm}>
        重置
      </button>
    </div>
  );
};
